<template>
  <div class="app-container">
    <el-form
      :model="ruleForm"
      ref="ruleForm" label-width="120px">
      <el-row :gutter="20">
        <!-- 结算详细信息 -->
        <el-divider content-position="left"
          ><legend class="divider-line">结算详细信息</legend></el-divider
        >
        <el-col :span="8">
          <el-form-item label="结算周期：" prop="settleCycle">
            <div class="yxkj-word-black">{{ruleForm.settleCycle}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结算单状态：" prop="status">
            <div class="yxkj-word-black" v-for="item in statusList.filter(obj => {return obj.value == ruleForm.status})" :key="item.value">{{''+item.name}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商家名称：" prop="sellerName">
            <div class="yxkj-word-black">{{ruleForm.sellerName}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单总额：">
            <div class="yxkj-word-black">{{ruleForm.moneyOrder}}元</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="余额支付总额：" prop="moneyPaidBalance">
            <div class="yxkj-word-black">{{ruleForm.moneyPaidBalance}}元</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现金支付总额：" prop="moneyPaidReality">
            <div class="yxkj-word-black">{{ruleForm.moneyPaidReality}}元</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="积分转换总额：" prop="moneyIntegral">
            <div class="yxkj-word-black">{{ruleForm.moneyIntegral}}元</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="积分总额：" prop="integral">
            <div class="yxkj-word-black">{{ruleForm.integral}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="退货总额：" prop="moneyBack" class="block">
            <div class="yxkj-word-black float-left">{{ruleForm.moneyBack}}元</div>
            <div class="yxkj-word-black float-left">退货申请的退款时间在结算周期内的所有退货退款总额，退货申请表的退款金额和。</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="退回积分总额：" prop="moneyIntegralBack" class="block">
            <div class="yxkj-word-black float-left">{{ruleForm.moneyIntegralBack}}元</div>
            <div class="yxkj-word-black float-left">退货申请的退款时间在结算周期内的所有退货退回积分金额总额，退货申请表的退回积分金额和。</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="其他金额：" prop="moneyOther" class="block">
            <div class="yxkj-word-black float-left">{{ruleForm.moneyOther}}元</div>
            <div class="yxkj-word-black float-left">退货申请的退款时间在结算周期内的所有退货退回积分金额总额，退货申请表的退回积分金额和。</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他金额类型：" prop="moneyOtherType">
            <div class="yxkj-word-black" v-for="item in otherType.filter(obj => {return obj.value == ruleForm.moneyOtherType})" :key="item.value">{{''+item.name}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他金额理由：" prop="moneyOtherReason">
            <div class="yxkj-word-black">{{ruleForm.moneyOtherReason}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="佣金总额：" prop="commision">
            <div class="yxkj-word-black">{{ruleForm.commision}}元</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="佣金总额：" prop="commision" class="block">
            <div class="yxkj-word-black float-left">{{ruleForm.commision}}元</div>
            <div class="yxkj-word-black float-left">佣金总额=各网单金额*佣金比例之和</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="系统计算总额：" prop="payable" class="block">
            <div class="yxkj-word-black float-left">{{ruleForm.payable}}元</div>
            <div class="yxkj-word-black float-left">系统计算总额=订单总额-退款总额-退回积分总额-佣金总额</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="应支付总额：" class="block">
            <div class="yxkj-word-black float-left" v-if="ruleForm.moneyOtherType && ruleForm.moneyOtherType == 1">{{ruleForm.payable + ruleForm.moneyOther}}元</div>
            <div class="yxkj-word-black float-left" v-if="ruleForm.moneyOtherType && ruleForm.moneyOtherType == 2">{{ruleForm.payable - ruleForm.moneyOther}}元</div>
            <div class="yxkj-word-black float-left" v-else>{{ruleForm.payable}}元</div>
            <div class="yxkj-word-black float-left">应付总额=系统计算总额+（或者-，由其他金额类型决定）其他金额</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="三级分销佣金：" prop="moneySale" class="block">
            <div class="yxkj-word-black float-left">{{ruleForm.moneySale}}元</div>
            <div class="yxkj-word-black float-left">如果设置商家承担佣金，应付金额=应付金额-三级分销总金额</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="承担佣金：">
            <div class="yxkj-word-black" v-for="item in saleSetting.filter(obj => {return obj.value == ruleForm.saleSet})" :key="item.value">{{''+item.name}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商家质疑：" prop="sellerDoubt">
            <div class="yxkj-word-black">{{ruleForm.sellerDoubt}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="平台解释：" prop="platformExplain">
            <div class="yxkj-word-black">{{ruleForm.platformExplain}}</div>
          </el-form-item>
        </el-col>

        <!-- 已经完成的订单 -->
        <el-divider content-position="left"
          ><legend class="divider-line">已经完成的订单</legend></el-divider
        >
        <el-table
          :data="orderList"
          border
          fit
          style="width: 100%">
          <el-table-column type="index" align="center" width="50">
          </el-table-column>
          <el-table-column show-overflow-tooltip width="200" prop="orderSn" label="子订单号">
          </el-table-column>
          <el-table-column show-overflow-tooltip width="200" prop="orderPsn" label="父订单号">
          </el-table-column>
          <el-table-column show-overflow-tooltip width="120" prop="memberName" label="买家用户名">
          </el-table-column>
          <el-table-column show-overflow-tooltip width="100" prop="sellerName" label="店铺">
          </el-table-column>
          <el-table-column prop="moneyProduct" label="商品金额">
          </el-table-column>
          <el-table-column width="120" prop="moneyOrder" label="订单总金额">
          </el-table-column>
          <el-table-column prop="moneyLogistics" label="物流金额">
          </el-table-column>
          <el-table-column width="120" prop="moneyCoupon" label="优惠券金额">
          </el-table-column>
          <el-table-column width="120" prop="moneyActFull" label="订单满减金额">
          </el-table-column>
          <el-table-column width="180" prop="moneyDiscount" label="优惠总额（含单品立减）">
          </el-table-column>
          <el-table-column prop="moneyBack" label="退款金额">
          </el-table-column>
          <el-table-column width="120" prop="moneyIntegral" label="积分换算金额">
          </el-table-column>
          <el-table-column prop="integral" label="使用积分">
          </el-table-column>
          <el-table-column prop="name" label="收货人">
          </el-table-column>
          <el-table-column width="150" prop="mobile" label="收货电话">
          </el-table-column>
          <el-table-column show-overflow-tooltip width="150" prop="addressAll" label="省市区">
          </el-table-column>
          <el-table-column show-overflow-tooltip width="150" prop="addressInfo" label="详细地址">
          </el-table-column>
          <el-table-column prop="paymentName" label="支付方式">
          </el-table-column>
        </el-table>

        <!-- 已经退货的订单 -->
        <el-divider content-position="left"
          ><legend class="divider-line">已经退货的订单</legend></el-divider
        >
        <el-table
          :data="backList"
          border
          fit
          style="width: 100%">
          <el-table-column type="index" align="center" width="50">
          </el-table-column>
          <el-table-column width="200" show-overflow-tooltip prop="productName" label="商品名称">
          </el-table-column>
          <el-table-column width="150" prop="sellerName" label="商家">
          </el-table-column>
          <el-table-column width="200" prop="orderSn" label="订单号">
          </el-table-column>
          <el-table-column prop="memberName" label="用户名">
          </el-table-column>
          <el-table-column width="200" show-overflow-tooltip prop="question" label="问题描述">
          </el-table-column>
          <el-table-column prop="backMoney" label="退款金额">
          </el-table-column>
          <el-table-column prop="backIntegral" label="退回积分">
          </el-table-column>
          <el-table-column width="120" prop="backCouponSn" label="退回优惠券">
          </el-table-column>
          <el-table-column width="120" prop="contactName" label="商家收件人">
          </el-table-column>
          <el-table-column width="140" prop="contactPhone" label="商家收件电话">
          </el-table-column>
          <el-table-column prop="moneyBack" label="退款金额">
          </el-table-column>
          <el-table-column show-overflow-tooltip width="150" prop="addressAll" label="省市区">
          </el-table-column>
          <el-table-column show-overflow-tooltip width="150" prop="addressInfo" label="详细地址">
          </el-table-column>
          <el-table-column prop="logisticsName" label="物流公司">
          </el-table-column>
          <el-table-column width="150" prop="logisticsNumber" label="快递单号">
          </el-table-column>
          <el-table-column prop="optName" label="处理人">
          </el-table-column>
          <el-table-column width="160" prop="backMoneyTime" label="退款时间">
          </el-table-column>
          <el-table-column width="160" prop="createTime" label="创建时间">
          </el-table-column>
        </el-table>

        <div class="fixed-bottom-20">
          <el-button type="success" @click="back">返回</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { detailSettlementSeller, checkdetailOrderListSeller, checkdetailBackListSeller } from '@/api/seller'
import { getCodeManager, codeToArray } from "@/api/all";
export default {
  name: 'settlementdetail',
  data() {
    return {
      settlementId: '',
      ruleForm: {},
      statusList: [],
      otherType: [],
      saleSetting: [],
      orderList: [],
      backList: [],
    }
  },
  created() {
    this.settlementId = this.$route.query.id
    detailSettlementSeller({id: this.settlementId, type: 0}).then(res => {
      this.ruleForm = res.data.data.settlement;
    })
    // 状态
    getCodeManager("SETTLEMENT_STATUS", () => {
      this.statusList = codeToArray("SETTLEMENT_STATUS")
    });
    getCodeManager("SETTLE_OTHER_TYPE", () => {
      this.otherType = codeToArray("SETTLE_OTHER_TYPE")
    });
    getCodeManager("SALE_SETTING", () => {
      this.saleSetting = codeToArray("SALE_SETTING")
    });
    // 获取已完成订单
    checkdetailOrderListSeller({settlementId: this.settlementId}).then(res => {
      this.orderList = res.data.rows
    })
    // 获取已取消订单
    checkdetailBackListSeller({settlementId: this.settlementId}).then(res => {
      this.backList = res.data.rows
    })
  },
  methods: {
    back() {
      history.back();
    },
  }
}
</script>
<style scoped>
::v-deep [class*=el-row] {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.el-select {
  margin-right: 10px;
}

::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  ::v-deep [class*=el-col-] {
    float: none;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .layui-upload-img {
    min-height: 100px;
    max-height: 200px;
    margin: 0 10px 10px 0;
}
</style>

